<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>usermedia</title>
        <script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="//webrtc.github.io/adapter/adapter-latest.js"></script>
        <style type="text/css">
            .popup{
  position: absolute;
  display:none;
  z-index:3000;
  background-color:#FFF;
  left: 15%;
  top: 10%;
  height: 80%;
  width: 70%;
  line-height:94px;
  text-align:center;
  border: 1px solid #03F;
}
        </style>
    </head>

    <body>
        <div id="cameraDiv" class="popup" style="overflow-y:auto">
            <div style="float:right;line-height: normal; "><button class="stop" style="color:red; height:30px; margin:0 0;">Stop</button></div>
            <span id="text1"></span>

            <video id="gum-local" autoplay playsinline ></video>

            <video class="gum-local" autoplay playsinline></video>
        </div>

        <button id="showVideo">Open camera</button>
        <div id="errorMsg"></div>

        <script type="text/javascript">
            function showDiv(e) {
                var div = $('#loadingDiv');
                if (e.target.textContent === 'Stop') {
                    div.css('display','none');
                    $('.popup').slideUp();
                } else {
                    div.css('display','block');
                    $('.popup').slideDown();
                    init(e);
                }
            }

            function init(e) {
                try {
                    const constraint = {audio: false, video: {width: {min: 640}, height: {min: 480}}};
                    const stream = navigator.mediaDevices.getUserMedia(constraint)
                    .then(handleSuccess);
                    //handleSuccess(stream);
                    e.target.disabled = true;
                } catch (e) {
                    handleError(e);
                }
            }

            function handleSuccess(stream) {
                const video = document.querySelector('#gum-local');
                const videoTracks = stream.getVideoTracks();
                console.log(`Using video device: ${videoTracks[0].label}`);
                window.stream = stream; // make variable available to browser console
                video.srcObject = stream;
            }

            function handleError(error) {
                if (error.name === 'ConstraintNotSatisfiedError') {
                    const v = constraints.video;
                    errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
                } else if (error.name === 'PermissionDeniedError') {
                    errorMsg('Permissions have not been granted to use your camera and ' +
                      'microphone, you need to allow the page access to your devices in ' +
                      'order for the demo to work.');
                }
                errorMsg(`getUserMedia error: ${error.name}`, error);
            }

            function errorMsg(msg, error) {
                const errorElement = document.querySelector('#errorMsg');
                errorElement.innerHTML += `<p>${msg}</p>`;
                if (typeof error !== 'undefined') {
                    console.error(error);
                }
            }


            $(document).on('click', '#showVideo', showDiv);
            $(document).on('click', '.stop', showDiv);
        </script>
    </body>
</html>